<template>
  <div class="flex flexwrapper">
    <div class="innerwrapper2 boxh" v-infinite-scroll="load" 
      immediate-check="false"
      :infinite-scroll-distance='50'
      :infinite-scroll-disabled="loading"
    >
      <div class="flex flexwrapper ">
        <div class="listitem mb_40 commhover"
          v-for="(item, index) in list"
          :key="index"
          @click="handleOpen(item)"
        >
          <div class="bg_fff">
            <div class="itembg flexcenter">
              <el-button type="text" >选择模板</el-button>
            </div>
            <div v-if="activeId == item.id" class="current">使用中</div>
            <img :src="item.img"
              alt=""
              class="imgbg"
            />
            <div class="titlename f-15">{{item.name}}</div>
          </div>
        </div>
      </div>
      <div class="flexcenter f-14 c_606 pb_15" v-if="isend">没有更多了</div>
      <div class="flexcenter f-14 c_606 pb_15" v-if="loading">加载中...</div>
    </div >
        <!-- <div class="listitem mb_40 commhover"
          v-for="(item, index) in 10"
          :key="index"
          @click="handleChange(item)"
        >
          <div class="bg_fff">
            <img
              src="https://d1.faiusr.com/2/AAEIABACGAAg5NTUlgYoqP36hwQwgAU48Ag.jpg"
              alt=""
              class="imgbg"
            />
            <div class="titlename">一刮千金</div>
          </div>
        </div> -->
  </div>
</template>
<script>
import {templateIndex } from '@/api/template'
export default {
    data(){
      return {
        loading:false,
        list:[],
        total:0,
        queryParams:{
          page:1,
          num:20
        },
        isend:false,
        activeId:'',
      }
    },
    props:{
      modalId:{
        default:""
      }
    },
    created(){
      this.activeId = this.modalId
      this.getlist()
    },
    methods:{
      getlist(){
        this.loading = true
        console.log('this.activeIndex:',this.activeIndex)
        let params = {...this.queryParams}
        if(this.activeIndex){
          params.class_id = this.activeIndex
        }
        if(this.input){
          params.keyword = this.input
        }
        templateIndex(params).then(res=>{
          this.list = this.list.concat(res.data.list.map(item=>({...item,img: process.env.VUE_APP_BASE_API + '/' + item.url})))
          this.total = res.data.count
          if(this.list.length == this.total){
            this.isend = true
          }
          this.loading = false
        }).catch(()=>{
          this.loading = false
        })
      },

      load() {
        if(this.isend){
          return
        }
        // console.log('加载')
        this.loading = true
        this.queryParams.page ++
        this.getList()
      },
      
      handleOpen(item){
        this.activeId = item.id
        this.$emit('changeTemp',item.id)
      }

    }
}
</script>

<style lang="scss" scoped>
.innerwrapper2{
  height: 600px;
  overflow: auto
}
.listitem {
  width: 20%;
  margin-bottom: 40px;
  height: 400px;
  padding: 0 4px;
 
  .bg_fff{
    border-radius: 3px;
    position: relative;
    overflow: hidden;
    &:hover .itembg{
      display: flex!important;
    }
  }
  .itembg{
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba($color: #000000, $alpha: 0.6);
  }
  .imgbg {
    width: 100%;
    height: 340px;
    line-height: 342px;
    // border-radius: 10px;
  }
}
.titlename {
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #000;
  overflow: hidden;
  text-overflow: ellipsis;
}
.current{
  position: absolute;
  left: -27px;
  top: -11px;
  background-color: #e91611;
  color: #fff;
  z-index: 2;
  font-size: 12px;
  text-align: center;
  padding: 15px 20px 0 20px;
  line-height: 30px;
  transform: rotate(-45deg);
}
</style>